<template>
  <li :class="['todo-item', todo.completed ? 'completed' : '']">
    <label> <input type="checkbox"  class="toggle" v-model="todo.completed"></label>
    <span>{{todo.content}}</span>
    <button @click="del">x</button>
  </li>
</template>

<script>
  export default {
    props: {
      todo: {
        type: Object,
        required: true
      }
    },
    methods: {
      del () {
        this.$emit('delToDo', this.todo.id)
      }
    }
  }
</script>
<style lang='stylus' scoped>
li
  height 3rem
  line-height 3rem
  display flex
  align-items center
  font-size 1.6rem
  vertical-align middle
  position relative
input
  width 3rem
  height 3rem
span 
  margin-left 1rem
button
  position absolute
  right 2%
.completed
  text-decoration line-through
  opacity .5
</style>